<!-- vue模板 -->
<template>
  <div class="category-order-container">
    <div class="header">
      <h2>类别顺序</h2>
    </div>
    
    <!-- 类别顺序表格 -->
    <el-table 
      :data="categoryList" 
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :row-class-name="getRowClassName"
    >
      <!-- 类别名称列 -->
      <el-table-column prop="name" label="类别" width="400">
        <template #default="scope">
          <div class="category-cell">
            <span v-if="scope.row.children && scope.row.children.length > 0" class="parent-category" @click="toggleExpand(scope.row)">
              <i :class="scope.row.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              {{ scope.row.name }}
            </span>
            <span v-else class="child-category">
              <i class="el-icon-arrow-right"></i>
              {{ scope.row.name }}
            </span>
          </div>
        </template>
      </el-table-column>
      
      <!-- 显示顺序列 -->
      <el-table-column prop="orderNum" label="显示顺序" width="150">
        <template #default="scope">
          <div v-if="scope.row.editing">
            <el-input 
              v-model="scope.row.editOrder" 
              size="small" 
              style="width: 80px;"
              @keyup.enter="saveOrder(scope.row)"
            />
          </div>
          <span v-else>{{ scope.row.orderNum || 0 }}</span>
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="编辑" width="120">
        <template #default="scope">
          <div v-if="scope.row.editing">
            <el-button type="text" size="small" @click="saveOrder(scope.row)">保存</el-button>
            <el-button type="text" size="small" @click="cancelEdit(scope.row)">取消</el-button>
          </div>
          <el-button v-else type="text" size="small" @click="editOrder(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<!-- 组件逻辑-->
<script setup>
import { ref, onMounted } from 'vue'
import { queryTree, updateCategoryOrder } from '@/api/set/order.js'
import { ElMessage } from 'element-plus'

// 响应式数据
const categoryList = ref([])

// 获取类别树数据
async function getCategoryTree() {
  try {
    const res = await queryTree()
    if (res.code === 200 && res.data && res.data.length > 0) {
      // 处理API返回的数据
      const processedData = processCategoryData(res.data)
      categoryList.value = processedData
    } else {
      ElMessage.warning('暂无分类数据')
    }
  } catch (error) {
    ElMessage.error('获取类别数据失败')
    console.error('获取类别数据失败:', error)
  }
}

// 处理类别数据，添加必要的状态字段
function processCategoryData(data) {
  return data.map(item => ({
    ...item,
    expanded: false,
    editing: false,
    editOrder: item.orderNum || 0,
    children: item.children ? item.children.map(child => ({
      ...child,
      editing: false,
      editOrder: child.orderNum || 0
    })) : []
  }))
}

// 编辑显示顺序
function editOrder(row) {
  row.editing = true
  row.editOrder = row.orderNum || 0
}

// 保存显示顺序
async function saveOrder(row) {
  if (row.editOrder < 0 || !Number.isInteger(Number(row.editOrder))) {
    ElMessage.warning('显示顺序只能填写自然数')
    return
  }
  
  try {
    // 调用后端API保存数据
    const res = await updateCategoryOrder(row.id, row.editOrder)
    if (res.code === 200) {
      row.orderNum = row.editOrder
      row.editing = false
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.msg || '保存失败')
    }
  } catch (error) {
    ElMessage.error('保存失败')
    console.error('保存失败:', error)
  }
}

// 取消编辑
function cancelEdit(row) {
  row.editing = false
  row.editOrder = row.orderNum || 0
}

// 切换展开状态
function toggleExpand(row) {
  if (row.children && row.children.length > 0) {
    row.expanded = !row.expanded
  }
}

// 设置行的样式类名
function getRowClassName({ row }) {
  if (row.children && row.children.length > 0 && row.expanded) {
    return 'expanded-parent-row'
  } else if (row.parentId && row.parentId > 0) {
    return 'child-row'
  }
  return ''
}

// 页面加载时获取数据
onMounted(() => {
  getCategoryTree()
})
</script>

<!-- 组件样式 -->
<style scoped>
.category-order-container {
  padding: 20px;
  background-color: white;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.category-cell {
  cursor: pointer;
}

.parent-category {
  font-weight: bold;
  color: #303133;
}

.child-category {
  color: #606266;
  padding-left: 20px;
}

.el-icon-arrow-up,
.el-icon-arrow-down,
.el-icon-arrow-right {
  margin-right: 8px;
  color: #909399;
}

.el-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

/* 展开的父级行样式 */
:deep(.expanded-parent-row) {
  background-color: #f0f0f0 !important;
}

/* 子级行样式 */
:deep(.child-row) {
  background-color: #fafafa !important;
}

/* 表格行交替颜色 */
:deep(.el-table__row:nth-child(even)) {
  background-color: #fafafa;
}

:deep(.el-table__row:nth-child(odd)) {
  background-color: #ffffff;
}
</style>